<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cvs {
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>
    <canvas id="cvs" width="400" height="400"></canvas>

</body>
<script>
    //获取canvas元素
    const cvsDom = document.querySelector('#cvs')

    //生成canvas绘制元素
    const context = cvsDom.getContext('2d')

    setInterval(function () {
        //保存一下一开始的绘图  
        context.save();

        // 定义定时器清空上次的绘图
        context.clearRect(0, 0, cvsDom.width, cvsDom.height);

        // 用来定义中心圆的位置
        context.translate(150, 150);
        //保存中心圆的位置
        context.save();

        //绘制时钟外圈的线条
        context.beginPath();
        context.arc(0, 0, 150, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
        context.stroke();

        //绘制中间的内圈的线条
        context.beginPath();
        context.arc(0, 0, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
        context.stroke();

        //先绘制小时刻度,12个
        for (let i = 0; i < 12; i++) {
            //指定旋转角度
            context.rotate(2 * Math.PI / 12);
            //开始绘制12个小刻度
            context.beginPath();
            context.lineWidth = 3;
            context.moveTo(130, 0);
            context.lineTo(145, 0);
            context.stroke();
        }
        context.restore();
        context.save();


        //绘制分钟
        for (let i = 0; i < 60; i++) {
            // 旋转角度
            context.rotate(2 * Math.PI / 60);
            //绘制几个长度
            context.beginPath();
            context.moveTo(130, 0);
            context.lineTo(145, 0);
            context.stroke();

        }
        context.restore();
        // 保存
        context.save();

        // 获取一下时间的格式
        const d = new Date()

        // 这里是获取小时
        const hour = d.getHours() % 12
        // 获取分钟数
        const min = d.getMinutes()
        // 获取秒数
        const sec = d.getSeconds()

        //绘制时针
        context.beginPath();
        // 这个时钟的旋转角度
        context.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2);

        context.lineWidth = 10;

        context.moveTo(-10, 0);
        context.lineTo(60, 0);
        context.stroke();

        context.restore();
        context.save();

        //绘制分钟的线条
        context.beginPath();
        //计算时钟的旋转角度
        context.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2);

        context.lineWidth = 5;
        context.strokeStyle = 'blue';

        context.moveTo(-10, 0);
        context.lineTo(85, 0);
        context.stroke();

        context.restore();
        context.save();


        //绘制秒针的线条
        context.beginPath();
        //计算时钟的旋转角度
        context.rotate(2 * Math.PI / 60 * sec - Math.PI / 2);

        context.lineWidth = 2;
        context.strokeStyle = '#f00';

        context.moveTo(-10, 0);
        context.lineTo(100, 0);
        context.stroke();

        context.restore();
        context.save();

        context.restore();
        context.restore();
    }, 1000)
</script>

</html>